おさらい(簡潔に)
前編では、非ITバックグラウンドの社長が「バイブコーディング」で議事録アプリを作ってしまったという衝撃の事実と、エンジニアである私が「簡単なレビュー」を頼まれて「簡単なわけないだろ😇」と心の中でツッコミを入れた話をしました。
そして実際に動かしてみた結果...「え、普通に動くじゃん！！！」
という、まさかの展開に。
非エンジニアが作ったとは思えないクオリティに驚愕しつつも、プロダクション環境で動かすには色々と...いや、かなり問題があることも判明しました。
前編で浮き彫りになった 恐ろしい 残課題たち
- 環境変数の扱い（OpenAI APIキーが丸見え状態でインターネットに上げられない😱）
- データ保持方法（ローカルのCSVがどんどん肥大化していく恐怖）
- コードのリファクタリング（セキュリティホールないよね...？ないよね...？）
- デザイン（まぁ、これは...うん...余力があれば...）
後編で扱う内容
後編では、この「動くけど本番環境には絶対デプロイできない」状態のアプリを、どうやって実用レベルまで持っていったのかを赤裸々にお伝えします！
特に以下の内容にフォーカスします:
- 環境変数とシークレット管理の実装
- CSVからデータベースへの移行（選定理由も含めて）
- コード構造の整理とセキュリティ改善
- デプロイ可能な状態にするまでの道のり
VibeCoding時代の到来により、今後ますます増えるであろう
「他人がAIで書いたコードをなんとかする仕事」。
そんな未来のあなたと自分へ贈る、実践的（？）リファクタリング奮闘記です😭
やってみよう
今日の相棒もCline。
モデルは、コーディングにおいて十分なパフォーマスを発揮してくれる「claude-sonnet-4-5-20250929」を利用してます。
改善方針の案をつくってもらう
無邪気に聞いてみる
この4点についての改善案を出してください。特に1、2についてはマストで解消したいです。
抽象的な提案ではなく、具体的に実装可能なレベルでお願いします。
最終的にはmdにまとめたいですが、まずはブレストしましょう
ーーー
1.環境変数の扱い（OpenAI APIキーが丸見え状態でインターネットに上げられない）
2.データ保持方法（ローカルのCSVがどんどん肥大化していく恐怖）
3.コードのリファクタリング（セキュリティホールないよね...？ないよね...？）
4.デザイン（まぁ、これは...うん...余力があれば...）
1の環境変数の扱いに関しては、ちょうど良い提案がなかったので（ローカル管理から脱出できないものや、docker-composeを利用する少々手間がかかるものなど）、何度かヒト側の意見を伝えて、ブレスト＆壁打ち。
ヒト側からの提案
環境変数の扱いですが、Vercelとかにデプロイするならシークレット管理もVercelでできる？あとは、Supabaseでもデプロイ・シークレット管理できる？
すると、良い感じの提案がAI側から出てきたので、出してくれた選択肢から1つ選んだら、その改善方針をMarkdownに書き出してくれました
リファクタリング計画＆デプロイガイドのMarkdown
改善方針に沿って実装してもらう
improvement_plan.md と DEPLOYMENT.md に沿って実装して
Clineがカキカキすること、数分。
完了したようですので、リファクタリングの内容をみてみましょう。
①実装内容
②プロジェクト構造
③デプロイ手順
いいですね！
パッとみた感じ、マストで解消したかった「DB移行」「環境変数管理の改善」はカバーされてそうですね✌️
実装された内容をサッと確認
001_initial.sqlにSupabase用のテーブル定義が作成されました（素晴らしき世界！）
また、CSVに対するデータ登録/変更/取得処理は、Supabaseのテーブル（Postgres）に対する登録/変更/取得処理に書き換えられてました！（祝🎉脱CSVデータ管理）
次に、環境変数の管理をみていく👀
・・・
どうやらまだOpenAIのAPIキーが書かれた.envが残ってたようなので念のため削除しよう。
あと、今後はgitでソース管理したいので、.gitignoreも作成してもらう。
.envファイルが不要な場合は削除してください。
また、これ以降はgithubで管理するのでリモートにあげるべきでないファイルは全て.gitignoreに書き込んでください
現時点のフォルダ構成（.envが削除されて、.gitignoreが作成されました！）
meeting-assistant/
├── api/ # Vercelエントリーポイント
│ └── index.py # メインアプリケーション
├── src/ # ソースコード
│ ├── __init__.py
│ ├── database.py # データベース操作
│ ├── ai_service.py # OpenAI API連携
│ ├── models.py # データモデル
│ └── templates/ # HTMLテンプレート
│ └── index.html # メインテンプレート
├── migrations/ # SQLマイグレーション
│ └── 001_initial.sql # 初期スキーマ
├── improvement_plan.md # 改善計画書
├── DEPLOYMENT.md # デプロイガイド
├── vercel.json # Vercel設定
├── requirements.txt # 依存関係
└── .gitignore # Git管理対象外設定
いざインターネットの世界へ
とりあえずセキュリティインシデントになるような情報は除去したので、Githubにあげてみよう！
・・・（割愛）
Githubにあがったのですが、次に何をしたらいいか、迷子になりましたが、ちょうどClineのプロンプトにデプロイについて記載ありました
レッツ Supabase !!!
次は「Supabaseでデータベースを作成」とあるので
Supabaseに連携していきます！
Supabaseは、オープンソースのBaaS（Backend as a Service）プラットフォームです。「Firebaseのオープンソース代替」として位置づけられることが多い。
細かいステップについては、すでに DEPLOYMENT.md に吐き出されてるので、迷わずできそう
Supabaseコンソールにおける操作は少しだけ長いので折りたたんでます！（ほぼ自分の備忘）
Supabaseコンソール操作
新規プロジェクト meeting-assistant のトップ
データベース作成する、SQL Editorに先ほど生成されたDDLをコピペ
実行すると、画面下部に Success. No rows returned だけ表示されました
Databaseページにいくと、ERみたいなものが表示されてました！（すげー）
最後に接続情報の取得
Connection String > URI が中々見つからなかったが画面上部の「Connect」というボタンを押下したらありました
こんな感じの接続情報（URI）を取得すればOK！
postgresql://postgres:[YOUR-PASSWORD]@db.xxxxxxxxxxxxxxxxxxxx.supabase.co:5432/postgres
Supabaseの設定は一旦終了
レッツ Vercel !!!
次は、Vercelの設定をしていきます。
Vercelは、フロントエンドアプリケーション（特にNext.js）のためのホスティング・デプロイプラットフォームです。Next.jsの開発元でもあります。
Githubにはすでにアップしてるので、Vercelプロジェクトを作成していきます。
Vercelコンソール操作
Githubから meeting-assistan リポジトリを Vercel に importしました。
デプロイすると、エラー
VercelのエラーをClineのプロンプトに貼り付けて、原因解析してもらうと、どうやら requirements.txt のsupabase-pyのバージョン指定に問題があるようです。
ActモードにしていたのでClineがそのまま、コーディングしてくれて、GithubにPushすると自動でVercelにデプロイされて無事、インターネットに公開されました🎉
本番で触ってみる！
テイク1
議事録の内容を入れて、AIで解析するボタンを押してみた！（ドキドキ）
・・・失敗！（まあそうですよね😅）
Cline先輩に、下記のプロンプトを投げて、修正依頼をします。
Vercelにはデプロイできたが、
Bad Request
The CSRF token is missing.
というエラーが発生しているどうしたらいいか
文字通り、フォームからのリクエストにCSRFトークンが含まれていないことが問題だったようです。
テイク2
再度、「AIで解析」を実行・・・！
・・・別のエラーが発生。（まあまだ2回目なので想定内😇）
テイク3
3度目の正直・・・！（🙏）
動きました！
・・・
Supabaseにもデータが登録されていました👏
会議テーブル
課題テーブル
さいごに・ふりかえって
「非エンジニアが作ったコードのリファクタリング」という、令和最新版の地獄 修行を体験してきました。
でも実際やってみて思ったのは、AIアシスタントがいれば意外となんとかなるということ。
今回学んだこと：
- AIは優秀だけど魔法使いじゃない（当たり前）
- 「AIで作ったコードをなんとかする仕事」は確実に増える（覚悟しとけ）
- テイク3で成功は及第点（？）
- なんだかんだコンソールとかの手作業がめんどくさい
次に「社長がAIでアプリ作っちゃいました☆」って言われても、もう怖くない...かも？
いや、やっぱ怖いです😇
でも、VibeCoding時代を生き抜く術は掴めた気がします。
みなさんのところにも、そのうち「レビューお願い！（簡単だから！）」が届くはず。
その時は...頑張ってください！！！ 👋✨
（この記事が役立つことを祈ってます）
【付録】 Supabaseについて
上でも少し触れたように、今回はデータ管理をCSVからSupabaseに移行しました。
理由としては、
- 設定や管理の楽さ（BaaSであることからIaaSやPaaSと比較してもさらにマネージドな環境である）
- 提供してる機能がすごすぎる
- 今回は使ってないですが、自動API生成機能があるので、将来的にこっちを利用したい
- 認証もあるので、社員しか使えないアプリにするために、これも使えそう
Supabaseが提供する主機能（参考までに）
- PostgreSQL データベース - オープンソースのリレーショナルDB
- 認証システム - 多様な認証方式に対応
- ストレージ - ファイル管理機能
- リアルタイム通信 - 即時データ同期
- Edge Functions - サーバーレス実行環境
- 自動API生成 - RESTful/GraphQL対応
※Gensparkで生成したスライド